<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加管理员</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
</head>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<body>
<form class="layui-form" action="/admin/add">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="number" name="phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <input type="hidden" id="imagePath" name="urls" value="">
        <label class="layui-form-label">头像</label>
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-inline">
                <input type="text" name="time" id="time" placeholder="yyyy-MM-dd" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            return true;//true才会走action
        });
    });
</script>
</body>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , upload = layui.upload
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#time'
        });
        upload.render({
            elem: '#test10' //绑定上传图片button的id
            , url: 'admin/upload image' //上传接口
            , done: function (res) {
                //上传完毕回调

                if (res.code == 1) {
                    layer.msg("上传成功");
                    let src = res.src;//把图片路径返回过来
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', src);
                    console.log(res)
                    $("#imagePath").attr("value", src);//给图片路径隐藏域赋值
                }
            }
            , error: function () {
                //请求异常回调
            }
        });

    });

</script>


</html>